"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/2
 */
import * as React from 'react'
import {autoSize, commonStyles} from "../assets/styles/common";
import MyText from "./MyText";
import {NAVBAR_HEIFHT, SCREEN_HEIGHT, SCREEN_WIDTH, STATUSBAR_HEIGHT} from "../constant";
import {MyInputToolBarProps} from "../interface/index";

const {View, Keyboard, TextInput, StyleSheet, TouchableOpacity, Animated} = require('react-native');
const {connect} = require('react-redux');

class MyInputToolBar extends React.Component<MyInputToolBarProps, any> {


    keyboardDidShowListener: any;
    keyboardDidHideListener: any;

    constructor(props: any, context: any,) {
        super(props, context);

        this.state = {
            bottom: new Animated.Value(0),
            height: 35,
            canPost: false,
        }
    }

    static defaultProps = {
        placeholder: null,
        style: null,
        onSend: null,
        autoFocus: true
    };

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardWillShow = (props) => {

        const {height} = props.endCoordinates;


        Animated.timing(
            this.state.bottom,
            {
                toValue: height,
                duration: 240,
            }
        ).start();
    };
    _keyboardWillHide = (props) => {

        Animated.timing(
            this.state.bottom,
            {
                toValue: 0,
                duration: 200,
            }
        ).start();
    };

    onKeyPress = ({nativeEvent}) => {

        if (nativeEvent.key === 'Enter') {
            const height = this.state.height;
            if (height <= 4 * 15 + 35) {
                this.setState({height: height + 15})
            }
        }
        if (nativeEvent.key === 'Backspace') {
            if (!this.state.value) return;
            const code = this.state.value.charCodeAt(this.state.value.length - 1);
            const height = this.state.height;
            if (height > 35 && code === 10) {
                this.setState({height: height - 15})
            }
        }
    };
    onChangeText = (value) => {
        this.setState({value})
    };


    onSend = () => {
        Keyboard.dismiss();
        if (this.props.onSend) {
            this.props.onSend(this.state.value);
        }
    };
    onBlur = () => {

    };

    render() {
        return (
            <Animated.View
                style={[commonStyles.flexRow, styles.position, {bottom: this.state.bottom}, this.props.style]}>
                <View style={commonStyles.flex1}>
                    <TextInput placeholder={this.props.placeholder}
                               multiline
                               onKeyPress={this.onKeyPress}
                               autoFocus={this.props.autoFocus}
                               onBlur={this.onBlur}
                               onChangeText={this.onChangeText}
                               underlineColorAndroid='transparent'
                               style={[styles.input, {height: this.state.height}]}/>
                </View>
                <TouchableOpacity disabled={!this.state.value} onPress={this.onSend}>
                    <MyText style={[styles.btn, this.state.value ? styles.btnActive : null]}>发表</MyText>
                </TouchableOpacity>
            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    position: {
        position: 'absolute',
        width: SCREEN_WIDTH,
        left: 0,
        bottom: 0,

        alignItems: 'center',
        backgroundColor: '#F5F4F4',
        padding: 10,
    },
    input: {
        width: '100%',
        backgroundColor: '#fff',
        padding: 5,
        fontSize: 15,
        borderWidth: 0.5,
        borderColor: '#E0E0E0',
        borderRadius: 5,
    },
    btn: {
        marginLeft: 10,
    },
    btnActive: {
        color: '#DAC228'
    }
});

export default MyInputToolBar;